<template>
	<view v-show="visible" class="mark">
		<view class="view">
			<image style="width: 550rpx; height: 265rpx; margin-top: -30rpx;" :src="newEdition"></image>
			<view class="tip">更新内容:</view>
			<scroll-view class="scroll" scroll-y>
				<view class="item" v-for="(item,index) in content" :key="index">
					{{item}}
				</view>
			</scroll-view>
			<view v-if="!downloading" class="btns">
				<button class="sign-btn" hover-class="com-hover-btn" @click="onSureClick()">立即更新</button>
			</view>
			<view v-else class="progress">
				<cmd-progress :percent="progress" stroke-color="linear-gradient(to right, #ef32d9, #3281ff)" :success-percent="successPercent"
				 :stroke-width="strokeWidth" status="active"></cmd-progress>
			</view>
		</view>
	</view>
</template>

<script>
	import cmdProgress from '@/components/cmd-progress/cmd-progress.vue'
	import config from '@/common/js/config.js'
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				visible: false,
				progress: 0,
				successPercent:0,
				strokeWidth:8,
				contents: [],
				downloading: false,
				success: true,
				newEdition:config.Resources.common.new_edition,
				appStore:config.Resources.appStore
			}
		},
		props: {
			type: {
				type: String,
				default: 'pkg'
			},
			url: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '版本更新'
			},
			content: {
				type: Array,
			}
		},
		methods: {
			show() {
				// setTimeout(() => {
					if (this.success) {
						this.visible = true
					}
				// }, 100);
			},
			hide() {
				// setTimeout(() => {
					this.visible = false
				// }, 100);
			},
			onCancelClick() {
				this.hide()
			},
			onSureClick() {
				var platform = uni.getSystemInfoSync().platform
				if (platform == 'ios' && this.type == 'pkg') {
					plus.runtime.openURL(this.appStore);
				} else {
					this.downloading = true
					var downloadTask = uni.downloadFile({
						url: this.url,
						success: (downloadResult) => {
							
							this.hide()
							if (downloadResult.statusCode === 200) {
								plus.runtime.install(downloadResult.tempFilePath, {
									force: false
								}, function() {
									plus.runtime.restart();
								}, (e) => {
									
									this.success = false
									uni.showToast({
										title: '安装升级包失败',
										icon: 'none'
									})
								});
							}
						}
					});
					downloadTask.onProgressUpdate((e) => {
						this.progress = e.progress
					})
				}
			}
		},
	}
</script>

<style>
	.mark {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.view {
		width: 550rpx;
		/* height: 600rpx; */
		background-color: white;
		border-radius: 15upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: center;
	}

	.title {
		margin-top: 20upx;
		color: #C40000;
		font-weight: bold;
		font-size: 38upx;
		text-align: center;
	}

	.tip {
		margin-top: 20upx;
		margin-left: 50upx;
		align-self: flex-start;
		font-size: 32upx;
		font-weight: 600;
		color: #87869a;
	}

	.scroll {
		width: 100%;
		height: 300upx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.item {
		margin: 0 50upx;
		text-align: left;
		font-size: 30upx;
		color: #87869a;
	}

	.btns {
		width: 86%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		margin-bottom: 30upx;
		margin-top: 20upx;
	}

	.icon {
		width: 45upx;
		height: 45upx;
		margin-right: 10upx;
	}

	.sure {
		padding: 10upx 0;
		text-align: center;
		color: #C40000;
		font-size: 30upx;
		font-weight: 500;
	}

	.progress {
		width: 86%;
		margin: 30upx 50upx;
	}
</style>
